<template>
  <div class="ms-index">
    <BackTop></BackTop>
    <nav class="ms-nav" v-if="mountedOk">
      <div class="nav-tags">
        <span>热门剧集</span>
        <span>人气明星</span>
        <span>排行榜</span>
      </div>
      <div class="nav-main">
        <div class="nav-swiper" v-swiper:mySwiper="swiperOption">
          <div class="swiper-wrapper">
            <!-- <div class="swiper-slide" :key="banner.id" v-for="banner in swiperlist">
              <img :src="banner.imgUrl" />
            </div>-->
            <div class="swiper-slide" :key="banner" v-for="banner in banners">
              <img :src="banner" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="nav-share">
          <nuxt-link to="vedio" class="nav-share-box" v-for="i in 6" :key="i">
            <div class="share-box-item">
              <img :src="imgList[i-1].localUrl" v-if="!!imgList[i-1]" />
              <div class="share-box-msg">
                <p>刀剑神域(9.6)</p>
                <p>投稿人:别动我结菜</p>
              </div>
            </div>
          </nuxt-link>
        </div>
      </div>
    </nav>
    <article class="article">
      <label id="articleItem"></label>
      <index-article class="article-item" id="3" :ishow="articleStatus"></index-article>
      <label id="musicItem"></label>
      <index-musics class="article-item" id="1" :ishow="musicStatus"></index-musics>
      <label id="movieItem"></label>
      <index-movies class="article-item" id="2" :ishow="movieStatus"></index-movies>
    </article>
  </div>
</template>

<script>
import indexSearch from "@/components/index/indexSearch/search";
import indexMovies from "@/components/index/indexMovies/movies";
import indexMusics from "@/components/index/indexMusics/musics";
import indexArticle from "@/components/index/indexArticle/article";
export default {
  name: "msIndex",
  layout: "dpage",
  data() {
    return {
      movieStatus: false,
      musicStatus: false,
      articleStatus: false,
      scrollTop: 0,
      banners: ["img/OrandMaisonTokyo.webp", "img/qiji.webp"],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        observer: true,
        autoplay: {
          delay: 6000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      imgList: ["/img/sao_1.jpg"],
      mountedOk: false,
    };
  },
  mounted() {
    //获取视频区图片
    this.$axios.get("/api/img/getVedioUrl").then((res) => {
      this.imgList = res.data.data;
    });
    //首页懒加载
    let _this = this;
    this.imgList = ["/api/img/qiji.webp"];
    this.mountedOk = true;
    var observer = new IntersectionObserver(function (changes) {
      changes.forEach(function (change) {
        var container = change.target;
        console.log(change.isIntersecting);
        //判断是否出现在界面上
        if (change.isIntersecting) {
          switch (change.target.id) {
            case "2": {
              _this.movieStatus = true;
              observer.unobserve(container); //关闭监听器
              return;
            }
            case "1": {
              _this.musicStatus = true;
              observer.unobserve(container); //关闭监听器
              return;
            }
            case "3": {
              _this.articleStatus = true;
              observer.unobserve(container); //关闭监听器
              return;
            }
          }
        }
      });
    });
    //监听对象集合
    this.query(".article-item").forEach(function (item) {
      observer.observe(item);
    });
  },
  methods: {
    query(selector) {
      return Array.from(document.querySelectorAll(selector));
    },
    test() {},
  },
  components: {
    "index-search": indexSearch,
    "index-movies": indexMovies,
    "index-musics": indexMusics,
    "index-article": indexArticle,
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 660px) {
  .ms-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .nav-main {
    justify-content: center;
    align-items: center;
    .nav-swiper {
      display: none;
    }
    .nav-share {
      .nav-share-box {
        width: 50%;
        height: 25vw;
        margin-bottom: 10px;
        .share-box-item {
          margin-right: 10px;
        }
      }
    }
  }
}
@media screen and (min-width: 660px) and (max-width: 1100px) {
  .ms-nav {
    width: 100vw;
    padding-left: 10px;
    padding-right: 10px;
    .nav-share {
      min-width: 660px;
      .nav-share-box {
        width: 213.333px;
        height: 120px;
      }
    }
    .nav-swiper {
      min-width: 430px;
    }
  }
}
@media screen and (min-width: 1100px) {
  .ms-nav {
    width: 1100px;
    display: flex;
    flex-direction: column;
    .nav-share {
      .nav-share-box {
        width: 213.333px;
        height: 120px;
      }
    }
  }
}
.ms-index {
  position: relative;
  min-height: 100vh;
  transition: all 0.4s ease-in-out;
}
.ms-nav {
  position: relative;
  min-height: 314px;
  margin: 0 auto;
  padding-top: 20px;
  animation: showNav 0.6s ease-in-out;
  .nav-tags {
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    &::after {
      position: absolute;
    }
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      padding-left: 8px;
      padding-right: 8px;
      height: 24px;
      font-size: 14px;
      box-shadow: 0px 2px 4px #eee;
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .nav-main {
    display: flex;
    width: 100%;
    min-height: 250px;
    // justify-content: center;
    // align-items: center;
    overflow-x: auto;
    margin: 0 auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .nav-swiper {
      width: 430px;
      height: 250px;
      overflow: hidden;
      .swiper-slide {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .nav-share {
      display: flex;
      width: 660px;
      min-height: 250px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      margin-left: 10px;
      overflow: hidden;
      .nav-share-box {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        .share-box-item {
          position: relative;
          height: 100%;
          background-image: url("/img/load.webp");
          background-repeat: no-repeat;
          background-size: 100% auto;
        }
        img {
          width: 100%;
          height: 100%;
          animation: showImg 0.4s ease-in-out;
          animation-fill-mode: forwards;
        }
        &:hover .share-box-msg {
          bottom: 0;
        }
        .share-box-msg {
          position: absolute;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding-left: 10px;
          bottom: -24px;
          left: 0;
          width: 100%;
          height: 48px;
          background-color: rgba(0, 0, 0, 0.4);
          color: white;
          transition: all 0.4s ease-in-out;
          p {
            height: 24px;
            line-height: 24px;
          }
        }
      }
    }
  }
}
.article {
  min-height: 400px;
}
.quick-nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: auto;
  right: 30px;
  top: 50%;
  z-index: 999;
  cursor: pointer;
  transform: translateY(-34px);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  padding: 4px;
  a {
    height: 20px;
  }
}
@keyframes showNav {
  0% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
@keyframes showImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>